<template>
    <div id="dian">
       <div class="top">
           <ul v-for="(v,i) in arr" :key="i">
               <li>{{v.text}}</li>
               <li>{{v.text1}}</li>
               <li>{{v.text2}}</li>
           </ul>
           <div class="top1">
               <van-icon name="search" />&nbsp;
                <van-icon name="like-o" />
           </div>
       </div>
       <div class="bgc">
           <img src="../../../public/6.png" alt="">
           <div class="name">
              <div class="logo">
                  <img :src="newarr.pic" alt="">
              </div>
              <div class="logo1">
                  <span>优选门店</span>
                  <span>{{newarr.sname}}</span><br>
                  <p>主营：美甲，美睫，美容，理疗</p>
              </div>
           </div>
       </div>
       <div class="adr">
           <li>
               <div class="li1">
                   <img src="../../../public/4.png" alt="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <p>营业执照</p>
               </div>
               <p>></p>
           </li>
           <li class="li2">
               <span>
                   类型
               </span>&nbsp;&nbsp;
               <span>
                   上门
               </span>&nbsp;
               <span>
                   到店
               </span>
           </li>
           <li>
               <b>
                   地址
               </b>
               <div>
                   <h2>西安市雁塔区海星城市广场-B座801室</h2>
                    <span>距您3.8km，驾车约12分钟</span>
               </div>
               <div>
                   <img src="../../../public/7.png" alt="">
                   <p>导航</p>
               </div>
           </li>
       </div>
       <div class="shop">
           <h1>特色商品</h1>
           <span>全部></span>
       </div>
       <div class="type">
    <router-link to="/qb">全部</router-link>
      <router-link to="/sbmj">手部美甲</router-link>
      <router-link to="/sjm">上睫毛</router-link>
      <router-link to="/zy">中医养生</router-link>
      <router-link to="/pf">皮肤管理</router-link>
      <router-link to="/spa">SPA按摩</router-link>
      <router-link to="/wb">外部渠道</router-link>
      <router-link to="/kj">科技美容</router-link>
       </div>
       <div class="icon">
           <div class="left">
               <van-icon name="more-o" />&nbsp;&nbsp;
               <span>商品分类</span>
           </div>
           <div class="right">
               <van-icon name="chat-o" />&nbsp;&nbsp;
               <span>联系店铺</span>
           </div>
       </div>
       <router-view/>
    </div>
    
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";
import {getlink} from "../../api/getapi.js"
Vue.use(Icon);
export default {
  data() {
    return {
      arr: [{ text: "首页", text1: "商品", text2: "评价" }],
      newarr:[]
    };
  },
  mounted(){
    getlink("/api/shop/selectShop?gid=3").then(ok=>{
      this.newarr=ok.data;
      // console.log(this.newarr);
      
    })
  }
};
</script>

<style scoped>
#dian {
  overflow: hidden;
  background-color: #f8f8f8;
}
.top {
  width: 100%;
  height: 1rem;
  position: fixed;
  display: flex;
  justify-content: space-between;
  background-color: white;
  z-index: 99;
}
.top ul {
  width: 60%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 1rem;
}
.top ul li {
  flex: 1;
  height: 1rem;
  margin-top: 0;
  color: gray;
  font-size: 0.26rem;
}
.top .top1 {
  width: 25%;
  height: 1rem;
  text-align: center;
  line-height: 1.2rem;
  font-size: 0.5rem;
}
.bgc {
  margin-top: 1rem;
  position: relative;
}
.bgc img {
  width: 100%;
  height: 3rem;
}
.bgc .name {
  width: 80%;
  height: 2rem;
  background-color: white;
  position: absolute;
  top: 0.9rem;
  left: 0.7rem;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.bgc .logo {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
}
.bgc .logo img{
  width: 100%;
  height: 100%;
}
.bgc .logo1 {
  width: 4rem;
  height: 1.3rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.bgc .logo1 span:nth-of-type(1) {
  width: 1rem;
  height: 0.3rem;
  background-color: #f3cdb6;
  color: #80604c;
}
.bgc .logo1 span:nth-of-type(2) {
  font-size: 0.34rem;
}
.bgc .logo1 p {
  color: gray;
}
.adr {
  width: 90%;
  height: 3rem;
  background-color: white;
  margin: auto;
  border-radius: 0.2rem;
  margin-top: 0.2rem;
}
.adr li {
  width: 100%;
  height: 0.9rem;
  border-bottom: 0.01rem solid gray;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.adr li:nth-of-type(3) {
  height: 1.2rem;
}
.adr li img {
  width: 1rem;
  height: 0.48rem;
}
.adr li .li1 {
  display: flex;
  align-items: center;
  color: gray;
}
.adr .li2 {
  display: block;
  line-height: 0.9rem;
}
.adr .li2 span:nth-of-type(1) {
  font-size: 0.26rem;
  color: gray;
}
.adr .li2 span:nth-of-type(2) {
  border: 0.01rem solid #b58863;
  color: #b58863;
}
.adr .li2 span:nth-of-type(3) {
  border: 0.01rem solid #b58863;
  color: #b58863;
}
.adr li:nth-of-type(3) img {
  width: 0.3rem;
  height: 0.3rem;
}
.adr li:nth-of-type(3) b {
  font-size: 0.26rem;
  color: gray;
  font-weight: 400;
}
.adr li:nth-of-type(3) span {
  color: gray;
}
.adr li:nth-of-type(3) h2 {
  font-size: 0.26rem;
}
.shop {
  width: 90%;
  height: 1rem;
  background-color: white;
  margin: auto;
  margin-top: 0.4rem;
  display: flex;
  justify-content: space-between;
  line-height: 1rem;
}
.shop span {
  color: gray;
  font-size: 0.26rem;
}
.type {
  width: 90%;
  height: 1.5rem;
  background-color: white;
  margin: auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.type a {
  display: block;
  width: 1.4rem;
  height: 0.5rem;
  color: black;
  background-color: #f4f4f4;
  text-align: center;
  line-height: 0.5rem;
  border-radius: 0.2rem;
}
.type .router-link-active {
  background-color: #c29671;
  color: white;
}
.icon {
  width: 100%;
  height: 1rem;
  position: fixed;
  bottom: 0;
  display: flex;
}
.icon .left,
.right {
  width: 50%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  font-size: 0.28rem;
  background-color: white;
}
</style>
